<template>
	<div>
		<div
			ref="dragButton"
			class="main"
			:style="{ left: buttonPosition.x + 'px', top: buttonPosition.y + 'px' }"
			@click="handleReturn"
		>
			<span @mousedown="handleMouseDown">点击这里拖动</span>
			<span class="return">返回</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const dragButton = ref<any>(null);
const buttonPosition = reactive({ x: 0, y: 0 });
let isDragging = false;
let startX = 0;
let startY = 0;
let offsetX = 0;
let offsetY = 0;

const handleReturn = () => {
	// router.push("/");
};

// 处理鼠标按下事件
const handleMouseDown = (event: MouseEvent) => {
	isDragging = true;
	startX = event.clientX;
	startY = event.clientY;
	offsetX = dragButton.value.offsetLeft;
	offsetY = dragButton.value.offsetTop;

	document.addEventListener("mousemove", handleMouseMove);
	document.addEventListener("mouseup", handleMouseUp);
};

// 处理鼠标移动事件
const handleMouseMove = (event: MouseEvent) => {
	if (isDragging) {
		const deltaX = event.clientX - startX;
		const deltaY = event.clientY - startY;
		buttonPosition.x = offsetX + deltaX;
		buttonPosition.y = offsetY + deltaY;
	}
};

// 处理鼠标释放事件
const handleMouseUp = () => {
	isDragging = false;

	document.removeEventListener("mousemove", handleMouseMove);
	document.removeEventListener("mouseup", handleMouseUp);
};

// 处理按钮点击事件
const handleClick = () => {
	console.log("按钮被点击了！");
};
</script>

<style scoped lang="scss">
.main {
	position: absolute;
	top: 0;
	bottom: 0;
	color: #000;
	height: 70px;
	background: #050c17;
	border: 1px solid #4cfefe;
	color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 200;
	user-select: none;
	padding-right: 10px;
	flex-direction: column;
	padding: 15px;
	box-sizing: border-box;

	span:first-of-type {
		cursor: move;
		padding-top: 10px;
	}
	.return {
		padding: 10px;
		padding-top: 5px;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	.return:hover {
		background-color: #349cf4;
	}
}
</style>
